<template>
    <header v-model="getSearchValue" class="my-search-header"  @click.prevent="agencyEvent($event,value)">
      <!--@click="back"-->
      <div class="seach-back"  @click="searchback">
        <span class="yl-2back"></span>
      </div>
      <div class="search-container" @click="search">
        <!-- <mt-search calss="mysearch" v-model="value" cancel-text="" placeholder="搜索"/> -->
        <input type="text" class="mysearch" v-model="value" placeholder="搜索" @blur="losesearchblur" @focus="getblur"  ref="replaceinput">
        <div class="searchicon">
          <span  class="yl-2search"></span>
        </div>
        <div class="searchdeleteicon" @click="deletesearchcontent" :class="{nodata:issearchblur}">
          <span class="yl-2sou-del"></span>
        </div>
      </div>
      <div style="width:0.88rem;line-height:0.88rem">
        <span class="search-span">搜索</span>
      </div>
    </header>


</template>
<script>
  import { Header as mtHeader } from 'mint-ui'
  import { Button as mtButton, Popup } from 'mint-ui'
  import { Search } from 'mint-ui';
  import api from 'src/api/index' ;
  export default{
    data(){
      return{
        iscancle: false,
        value: '',
        result: [],
        issearchblur:true,//判断输入框是否获取焦点
        focusState:false,//是否聚焦
      }
    },
    computed : {
      getSearchValue () {
        this.value = this.searchItem ;
        return this.searchItem ;
      }
    },
    components:{
      mtHeader, mtButton, Popup, Search
    },
    compunted:{

    },
    mounted(){

    },
    props:['searchItem','losesearchfocus'],
    methods:{
      //获取焦点
      getblur(){
        this.$emit("getsearchblur");
        $(".mysearch").focus();
        this.issearchblur=false;
      },
      //失去焦点
      losesearchblur(){
        this.issearchblur=true
      },
      deletesearchcontent(){
         this.value="";
         $(".mysearch").focus();
      },
      searchback(){
        // this.$router.go(-1)
      },
      agencyEvent (e,v) {
        if("yl-2back" === String(e.target.className)){
            this.$router.go(-1)
        }else
        if("search-span" === String(e.target.className)){
          if(v){
            api.Savehistroysearch({name:v}) ;
            let type = this.$route.query.type;
            if (!type) type = 0;
            this.$router.push({path:'/searchResult',query:{params:v,type:type}});
          }
        }
      },
      search () {
        const type = this.$route.query.type ;
        this.$router.push({path:'/search',query:{type:type}}) ;
      }
    }
  }
</script>
<style lang="less">
.search-span{
  color:#fff;
  font-size:.34rem;
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem
}
.seach-back{
  height: 0.88rem;
  line-height: 0.88rem;
  color:#fff;
  font-size:.40rem;
  width: 0.5rem
}
.searchdeleteicon{
  position: absolute;
  top: 0.02rem;
  right:0.3rem;
  font-size: 0.44rem;
  color: #909095
}
.searchicon{
  width: 0.5rem;
  position: absolute;
  top: 0.03rem;
  left: 0.2rem;
  font-size: 0.30rem;
  color: #909095;
}
.mysearch{
  outline-color: invert ;  
  outline-style: none ;  
  outline-width: 0px ;  
  border: none ;  
  border-style: none ;  
  text-shadow: none ;  
  -webkit-appearance: none ;  
  -webkit-user-select: text ;  
  outline-color: transparent ;  
  box-shadow: none; 
  height: 0.6rem;
  width: 95%;
  font-size: 0.26rem;
  color: #909095;
  padding-left: 0.6rem;
  border-radius: 5px
}
  .mint-search{
    .mint-searchbar-inner .mintui-search{
      font-size: .32rem;
    }
  }
  .search-container .mint-search{
    height:44px;
  }
  .mint-searchbar-core{
    height:28px;
    margin-top: 0rem;
    line-height: 28px
  }
  .mint-searchbar{
    padding: 20px 10px;
  }
  .my-search-header{
    display: flex;
    height: 44px;
    line-height: 134px;
    padding: 0 12px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left:0;
    right:0;
    z-index:1;
    background: linear-gradient(to right, #fd996d, #ff5c5c);
  }


  .mint-searchbar-inner{
    border-radius: .1rem;
    background: #ffffff!important
  }
  .mint-searchbar-inner , .mint-searchbar-inner input{
    background-color: #ffffff;
  }

  .mint-searchbar-inner .mintui-search{
    font-size: 0.28rem;
    color: #909085;
  }
  .mint-searchbar-inner input{
    color: #909085;
    margin-left: 0.10rem;
    font-size:.26rem;
  }

  .search-container{
    position: relative;
    height: 0.88rem;
    line-height: 0.88rem;
    flex:1
  }
  .mint-search-list{
    display:none;
  }
  .search-container .mint-searchbar{
    background: linear-gradient(to right, #fd996d, #ff5c5c);
    height:.88rem;
    line-height: .88rem;
  }
  .nodata{
    display: none
  }
</style>
